<template>
  <div>
    <!-- 创建查询条件 -->
    <TopFilter ref="formPanel" :list="topFilterList" :cols="4" :collapse="true" @filterChange="changeHandle"></TopFilter>
    <!-- 创建一个查询table -->
    <FilterTable
      ref="table"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :columns="columns"
      :onColumnsChange="columns => (this.columns = columns)"
      columnsRef="cmcCustomerLossMainPage"
    >
      <!-- <template slot="controls">
        <el-button size="small" type="primary"  icon="el-icon-download" :loading="exportLoading" @click="customerLossQueryExportData">导出</el-button>
      </template> -->
    </FilterTable>

    <!-- 处理明细 destroyOnClose-->
    <Drawer :visible.sync="questionnaire" title="RTM报警信息处理明细" destroyOnClose width="1300" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <RtmAlarmDetail :rtmTrafficCode="rtmTrafficCode" @closeDialog="closeQuestionNaire"></RtmAlarmDetail>
    </Drawer>

    <!-- 编辑信息 -->
    <BaseDialog :visible.sync="visible" :title="this.title" width="70%" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <EditAlarmDetail :resData="resData" @close="closeHandler" />
    </BaseDialog>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { getRtmAlarm,reportRTMToAcc } from '@/api/customerRepair/rtmalarm/rtmalarminfo';
import RtmAlarmDetail from '@/pages/customerRepair/RTMalarm/RTMalarmprocessing/rtmalarmdetail.vue'; // 处理明细
import EditAlarmDetail from '@/pages/customerRepair/RTMalarm/RTMalarmprocessing/editrtmalarm.vue'; // 编辑RTM报警处理
export default {
  // 组件注册
  components: {
    RtmAlarmDetail,
    EditAlarmDetail
  },
  mixins: [dictionary],
  // 绑定数据定义
  data() {
    this.BaseTable = null;
    this.title = '';
    return {
      topFilterList: this.createTopFilterList(),
      fetchApi: getRtmAlarm,
      fetchParams: { xhrAbort: false },
      columns: this.createColumns(),
      detailData: '', // 明细数据
      questionnaire: false,
      visible: false,
      selectColumns: [],
      rtmTrafficCode: null,
      resData: null,
      type: null
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },

  // 处理方法
  methods: {
    // RTM报警明细
    showDetail(val) {
      this.selectColumns[0] = val;
      this.rtmTrafficCode = val.RTM_TRAFFIC_CODE;
      this.questionnaire = true;
    },
    edit(val) {
      this.resData = val;
      this.visible = true;
      this.title = '救援信息编辑';
    },
    report(val) {
      let reportObj = Object.assign({}, {RTMTrafficCode:val.RTM_TRAFFIC_CODE },{roNo:val.VWTSBH});
      this.$confirm('是否确认提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          reportRTMToAcc(reportObj).then(res => {
            if (res.resultCode == 200) {
              this.$message.success('提交成功');
              this.canCalList();
            } else {
              this.$message.error('提交失败');
            }
          });
        })
        .catch(() => {});
    },
    closeQuestionNaire() {
      this.questionnaire = false;
    },
    closeHandler() {
      this.visible = false;
    },
    // 关闭页面触发事件
    // 创建查询条件
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'customerName'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin'
        },
        {
          type: 'SELECT',
          label: '处理状态',
          fieldName: 'handelstatus',
          itemList: this.createDictList('8202')
        }
      ];
    },
    createColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 200,
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.showDetail(props.row)}>
                  明细
                </el-button>
                <el-button size="mini" type="text" onClick={() => this.edit(props.row)}>
                  编辑
                </el-button>
                <el-button size="mini" type="text" onClick={() => this.report(props.row)}>
                  提交
                </el-button>
              </div>
            );
          }
        },
        {
          title: '客户名称',
          dataIndex: 'CUSTOMER_NAME',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '联系方式',
          dataIndex: 'CUSTOMER_PHONE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '底盘号',
          dataIndex: 'VIN',
          width: 160,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '委托书号',
          dataIndex: 'VWTSBH',
          width: 160,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '报警处理单号',
          dataIndex: 'RTM_TRAFFIC_CODE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '报警编号',
          dataIndex: 'ALERT_CODE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '任务接收时间',
          dataIndex: 'TASK_RECEIVE_TIME',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'MODEL',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '是否需要道路救援',
          dataIndex: 'IS_RESCUE',
          width: 180,
          sorter: true,
          filter: true,
          filterType: 'radio',
          filterItems: this.createDictList('1004'),
          showOverflowTooltip: true,
          render: props => {
            return <div>{this.createDictText(props.row.IS_RESCUE, '1004')}</div>;
          }
          // editable: true,
          // defaultEditable: true,
          // editType: 'checkbox',
          // editItems: [
          //   { text: '', trueValue: 10041001 },
          //   { text: '', falseValue: 10041002 }
          // ]
        },
        {
          title: '道路救援信息',
          dataIndex: 'RESCUE_INFORMATION',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '处理状态',
          dataIndex: 'HANDLE_STATUS',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'radio',
          filterItems: this.createDictList('8202'),
          render: props => {
            return <span>{this.createDictText(props.row.HANDLE_STATUS, '8202')}</span>;
          }
        },
        {
          title: '出发时间',
          dataIndex: 'DSTART',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '到达时间',
          dataIndex: 'DREACH',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '道路救援完成时间',
          dataIndex: 'DRETURN',
          width: 180,
          sorter: true,
          filter: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        }
      ];
    },
    // 查询条件触发方法
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { offset: 0, xhrAbort: false });
    }
  }
};
</script>

<style></style>
